<template>
  <div>
<!--顶部区域-->

<van-nav-bar  class="toutiao-nav-bar" title="登录">
<i slot="left" class="iconfont icon-zuojiantou"  @click="$router.back()"></i>
</van-nav-bar>
<!-- 表单部分 -->
<van-form @submit="onLogin" ref="loginForm">
  <van-field
        v-model="user.mobile"
        name="mobile"
        placeholder="请输入手机号"
        :rules="verifyrules.mobile"
        type="number"
       
      >
      <i slot="left-icon" class="iconfont icon-shouji"></i>
      </van-field>
  <van-field
        v-model="user.code"
        name="code"
         placeholder="请输入验证码"
         :rules="verifyrules.code"
         type="number"
    >
     <i slot="left-icon" class="iconfont icon-yanzhengma"></i>
    <template #button>
      <van-count-down v-if="isCountDownShow" :time="time"  @finish='isCountDownShow=false' />
    <van-button size="small" type="primary" class="send-sms-btn" @click="isSmsg" v-else native-type="button">发送验证码</van-button>
    </template>
  </van-field>
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" class="login-btn-wrap">登录</van-button>
  </div>
</van-form>
</div>
</template>

<script>
import { login, getSmsCode } from '@/api/user.js'
export default {
  data(){
    return {
      user:{
      mobile:'',
      code:''
      },
      time:  6 * 1000,// 倒计时的时间ms
      isCountDownShow:false,
      verifyrules:{
        mobile:[
          {
            required:true,
            message:'请输入手机号'
          },
          {
            pattern:/^1\d{10}$/,
            message:'手机号格式有误'
          }
         
        ],
        code:[
          {
            required:true,
            message:'请输入验证码'
          },
          {
            pattern:/^\d{6}$/,
            message:'验证码有误'
          }
         
        ]
      }
     }
  },
  methods:{
    async onLogin(){
       // 开始转圈圈
      this.$toast.loading({
        duration: 0, // 持续时间，0表示持续展示不停止,当后面再次调用roast时会覆盖这个loading
        forbidClick: true, // 是否禁止背景点击
        message: '登录中...' // 提示消息
      })
      try {
        const result = await login(this.user)
        console.log('登录成功', result)
        // 储存token值到store中
        this.$store.commit('setUser', result.data.data)
        this.$toast.success('登录成功')
         this.$router.push('/')// 跳转到首页
      } catch (error) {
      if (error.response.status === 400) {
        console.log('登录失败', error)
        this.$toast.fail('登录失败，手机号或验证码错误')
      }
  }
    },
    async isSmsg(){
      // 1.验证手机号
        try {
            await this.$refs.loginForm.validate('mobile')
        } catch (err){
            return this.$toast('手机号有误')
        }
        // 2.显示倒计时  
      this.isCountDownShow = true
      // 3.发送验证码
        try {
          // 发送验证码成功
          var res = await getSmsCode(this.user.mobile)
          this.$toast('发送成功')
          console.log(res)
        } catch (err) {
          // 发送验证码失败
          this.isCountDownShow = true// 关闭倒计时
           if (err.response.status === 429) {
         this.$toast('发送太频繁了，请稍后重试')
         } else {
         this.$toast('发送失败，请稍后重试')
         }
        }
    }
  },
  mounted(){
    console.log(this.$store.state.user)
  }

}
</script>

<style lang='less'>
.iconfont{
    font-size: 37px;
}
.send-sms-btn {
    width: 152px;
    height: 46px;
    line-height: 46px;
    background-color: #ededed;
    font-size: 22px;
    color: #666;
    border: none;
    border-radius: 23px;
  }
.login-btn-wrap {
    padding: 53px 33px;
    
    border-radius: 10px;
    .login-btn {
      background-color: #6db4fb;
      border: none;
}
}

</style>
